<template>
  <view class="container">
    <view class="header">
      <text class="title">发票查看</text>
    </view>

    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>

    <view v-else-if="!invoiceImageUrl" class="no-invoice">
      <image src="/static/img/noorder.png" class="no-invoice-img"></image>
      <text class="no-invoice-text">暂无发票图片</text>
    </view>

    <view v-else class="invoice-content">
      <!-- 发票文件显示区域 -->
      <view class="file-section">
        <!-- PDF文件显示 -->
        <view v-if="invoiceFormat === 'PDF'" class="pdf-container">
          <view class="file-info">
            <text class="file-name">{{ getFileName(invoiceImageUrl) }}</text>
            <text class="file-format">PDF格式</text>
          </view>
          <view class="pdf-preview">
            <text class="pdf-placeholder">PDF文件</text>
            <text class="pdf-tip">点击下方按钮下载PDF文件</text>
          </view>
        </view>

        <!-- OFD文件显示 -->
        <view v-else-if="invoiceFormat === 'OFD'" class="ofd-container">
          <view class="file-info">
            <text class="file-name">{{ getFileName(invoiceImageUrl) }}</text>
            <text class="file-format">OFD格式</text>
          </view>
          <view class="ofd-preview">
            <text class="ofd-placeholder">OFD文件</text>
            <text class="ofd-tip">点击下方按钮下载OFD文件</text>
          </view>
        </view>

        <!-- 图片文件显示 -->
        <view v-else class="image-section">
          <image
            :src="`${BASE_URL}${invoiceImageUrl}`"
            class="invoice-image"
            mode="aspectFit"
            @error="handleImageError"
          />
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button
          v-if="invoiceFormat === 'PDF' || invoiceFormat === 'OFD'"
          class="btn btn-primary"
          @tap="downloadFile"
        >
          <text>下载文件</text>
        </button>
        <button v-else class="btn btn-primary" @tap="saveImage">
          <text>下载图片</text>
        </button>
      </view>

      <!-- 发票抬头信息 -->
      <view v-if="invoiceInfo" class="invoice-info">
        <view class="info-title">发票抬头信息</view>
        <view class="info-grid">
          <view class="info-item">
            <view class="info-label">发票抬头</view>
            <view class="info-value">{{
              invoiceInfo.invoiceTitle || "未填写"
            }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">单位税号</view>
            <view class="info-value">{{
              invoiceInfo.invoiceTaxNumber || "未填写"
            }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">注册地址</view>
            <view class="info-value">{{
              invoiceInfo.invoiceAddress || "未填写"
            }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">注册电话</view>
            <view class="info-value">{{
              invoiceInfo.invoicePhone || "未填写"
            }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">开户银行</view>
            <view class="info-value">{{
              invoiceInfo.invoiceBank || "未填写"
            }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">银行账户</view>
            <view class="info-value">{{
              invoiceInfo.invoiceBankAccount || "未填写"
            }}</view>
          </view>
          <view v-if="invoiceInfo.invoiceRemark" class="info-item full-width">
            <view class="info-label">备注</view>
            <view class="info-value">{{ invoiceInfo.invoiceRemark }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 返回按钮 -->
    <view class="back-button">
      <button class="btn btn-default" @tap="goBack">返回</button>
    </view>
  </view>
</template>

<script>
import { getInvoiceInfo } from "@/common/api/orderList.js";
import { BASE_URL } from "@/common/utils/request.js";
export default {
  data() {
    return {
      BASE_URL: BASE_URL,
      orderId: "",
      invoiceImageUrl: "",
      invoiceInfo: null,
      invoiceFormat: "PDF", // 默认格式
      loading: true,
    };
  },

  onLoad(options) {
    this.orderId = options.orderId || "";
    this.invoiceImageUrl = options.imageUrl
      ? decodeURIComponent(options.imageUrl)
      : "";

    if (!this.orderId) {
      uni.showToast({
        title: "订单ID无效",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }

    this.loadInvoiceInfo();
  },

  methods: {
    // 加载发票信息
    async loadInvoiceInfo() {
      try {
        const res = await getInvoiceInfo(this.orderId);

        // 处理多层响应结构
        let invoiceData = null;
        if (res.data.ok) {
          invoiceData = res.data.data;
        }
        if (invoiceData) {
          this.invoiceInfo = invoiceData.invoiceInfo;
          if (!this.invoiceImageUrl && invoiceData.invoiceImageUrl) {
            this.invoiceImageUrl = invoiceData.invoiceImageUrl;
          }
          // 设置发票格式
          if (invoiceData.invoiceFormat) {
            this.invoiceFormat = invoiceData.invoiceFormat;
          }
        }
      } catch (error) {
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        this.loading = false;
      }
    },

    // 保存图片到相册
    saveImage() {
      if (!this.invoiceImageUrl) {
        uni.showToast({
          title: "暂无发票图片",
          icon: "none",
        });
        return;
      }

      // 显示保存选项
      // uni.showActionSheet({
      //   itemList: ["保存到相册", "转发给好友", "保存到文件"],
      //   success: (res) => {
      //     switch (res.tapIndex) {
      //       case 0:
      //         this.saveToAlbum();
      //         break;
      //       case 1:
      //         this.shareToFriend();
      //         break;
      //       case 2:
      //         this.saveToFile();
      //         break;
      //     }
      //   },
      // });
      this.saveToAlbum();
    },

    // 保存到相册
    saveToAlbum() {
      uni.showLoading({
        title: "保存中...",
      });

      // 先检查授权状态
      uni.getSetting({
        success: (settingRes) => {
          if (settingRes.authSetting["scope.writePhotosAlbum"] === false) {
            // 用户之前拒绝了授权，引导用户手动开启
            uni.showModal({
              title: "提示",
              content: "需要您授权保存图片到相册",
              showCancel: false,
              success: () => {
                uni.openSetting({
                  success: (openRes) => {
                    if (openRes.authSetting["scope.writePhotosAlbum"]) {
                      this.downloadAndSaveImage();
                    }
                  },
                });
              },
            });
            return;
          }

          // 下载图片
          this.downloadAndSaveImage();
        },
      });
    },

    // 下载并保存图片
    downloadAndSaveImage() {
      const imageUrl = `${BASE_URL}${this.invoiceImageUrl}`;

      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存图片到相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "保存成功",
                  icon: "success",
                });
              },
              fail: (err) => {
                uni.hideLoading();
                console.error("保存图片失败:", err);

                // 如果是权限问题，提示用户授权
                if (
                  err.errMsg.includes("auth") ||
                  err.errMsg.includes("denied")
                ) {
                  uni.showModal({
                    title: "权限提示",
                    content: "需要您授权保存图片到相册",
                    confirmText: "去授权",
                    cancelText: "取消",
                    success: (modalRes) => {
                      if (modalRes.confirm) {
                        uni.openSetting();
                      }
                    },
                  });
                } else {
                  uni.showToast({
                    title: `保存失败: ${err.errMsg || "未知错误"}`,
                    icon: "none",
                    duration: 3000,
                  });
                }
              },
            });
          } else {
            uni.hideLoading();
            uni.showToast({
              title: `下载失败(${res.statusCode})`,
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("图片下载失败:", err);

          // 如果是路径问题，尝试不指定filePath重新下载
          if (
            err.errMsg.includes("ENOENT") ||
            err.errMsg.includes("no such file")
          ) {
            this.retryDownloadWithoutPath();
            return;
          }

          uni.hideLoading();

          // 检查是否是网络问题
          let errorMessage = "下载失败，请重试";
          if (
            err.errMsg.includes("request:fail") ||
            err.errMsg.includes("network")
          ) {
            errorMessage = "网络错误，请检查网络连接";
          } else if (err.errMsg.includes("domain")) {
            errorMessage = "域名未配置，请联系客服";
          } else if (err.errMsg.includes("timeout")) {
            errorMessage = "下载超时，请重试";
          }

          uni.showToast({
            title: errorMessage,
            icon: "none",
            duration: 3000,
          });
        },
        complete: () => {
          // 确保loading被隐藏
          uni.hideLoading();
        },
      });
    },

    // 重试下载（不指定路径）
    retryDownloadWithoutPath() {
      const imageUrl = `${BASE_URL}${this.invoiceImageUrl}`;

      uni.downloadFile({
        url: imageUrl,
        // 不指定filePath，让系统自动处理
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存图片到相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "保存成功",
                  icon: "success",
                });
              },
              fail: (err) => {
                uni.hideLoading();
                console.error("重试保存图片失败:", err);
                uni.showToast({
                  title: `保存失败: ${err.errMsg || "未知错误"}`,
                  icon: "none",
                  duration: 3000,
                });
              },
            });
          } else {
            uni.hideLoading();
            uni.showToast({
              title: `下载失败(${res.statusCode})`,
              icon: "none",
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.error("重试下载失败:", err);
          uni.showToast({
            title: "下载失败，请稍后重试",
            icon: "none",
            duration: 3000,
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },

    // 转发给好友
    shareToFriend() {
      const imageUrl = `${BASE_URL}${this.invoiceImageUrl}`;

      // 下载图片到临时路径
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 使用微信分享
            uni.shareAppMessage({
              title: "发票图片",
              path: "/pages/user/invoice_view/invoice_view",
              imageUrl: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "分享成功",
                  icon: "success",
                });
              },
              fail: () => {
                uni.showToast({
                  title: "分享失败",
                  icon: "none",
                });
              },
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: "图片加载失败",
            icon: "none",
          });
        },
      });
    },

    // 保存到文件（微信小程序中的文件管理）
    saveToFile() {
      const imageUrl = `${BASE_URL}${this.invoiceImageUrl}`;

      uni.showLoading({
        title: "保存中...",
      });

      // 下载到小程序的文件系统
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 获取文件管理器
            const fs = uni.getFileSystemManager();
            const fileName = `invoice_${Date.now()}.jpg`;
            const savedPath = `${uni.env.USER_DATA_PATH}/${fileName}`;

            // 复制到用户数据目录
            fs.copyFile({
              srcPath: res.tempFilePath,
              destPath: savedPath,
              success: () => {
                uni.showModal({
                  title: "保存成功",
                  content: `文件已保存到小程序文件夹\n文件名: ${fileName}`,
                  showCancel: false,
                  confirmText: "知道了",
                });
              },
              fail: (err) => {
                uni.showToast({
                  title: "保存失败",
                  icon: "none",
                });
              },
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },

    // 图片加载失败
    handleImageError() {
      uni.showToast({
        title: "图片加载失败",
        icon: "none",
      });
    },

    // 获取文件名
    getFileName(url) {
      if (!url) return "未知文件";
      const parts = url.split("/");
      return parts[parts.length - 1] || "未知文件";
    },

    // 下载文件
    downloadFile() {
      if (!this.invoiceImageUrl) {
        uni.showToast({
          title: "暂无文件",
          icon: "none",
        });
        return;
      }

      const fileUrl = `${BASE_URL}${this.invoiceImageUrl}`;
      const fileName = this.getFileName(this.invoiceImageUrl);

      uni.showLoading({
        title: "下载中...",
      });

      uni.downloadFile({
        url: fileUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            this.saveFileToLocal(res.tempFilePath, fileName);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: `下载失败(${res.statusCode})`,
              icon: "none",
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.error("文件下载失败:", err);

          let errorMessage = "下载失败，请重试";
          if (err.errMsg) {
            if (err.errMsg.includes("domain")) {
              errorMessage = "域名未配置，请联系客服";
            } else if (err.errMsg.includes("network")) {
              errorMessage = "网络连接失败，请检查网络";
            } else if (err.errMsg.includes("timeout")) {
              errorMessage = "下载超时，请重试";
            } else if (err.errMsg.includes("cert")) {
              errorMessage = "证书验证失败，请联系客服";
            }
          }

          uni.showToast({
            title: errorMessage,
            icon: "none",
            duration: 3000,
          });
        },
        complete: () => {
          // 确保loading被隐藏
          uni.hideLoading();
        },
      });
    },

    // 保存文件到本地
    saveFileToLocal(tempFilePath, fileName) {
      uni.hideLoading();

      // 直接打开文件选择器让用户选择保存路径
      this.openFileSaveDialog(tempFilePath, fileName);
    },

    // 打开文件保存对话框
    openFileSaveDialog(tempFilePath, fileName) {
      // 使用微信小程序的 wx.openDocument 打开文件，让用户通过系统菜单选择保存位置
      wx.openDocument({
        filePath: tempFilePath,
        fileType: this.getFileType(fileName),
        showMenu: true, // 显示右上角菜单
        success: () => {
          // 文件打开成功，静默处理，不显示提示
          console.log("文件已成功打开，用户可通过右上角菜单保存");
        },
        fail: (err) => {
          console.error("打开文件失败:", err);
          // 如果系统无法打开文件，提供备用保存方案
          this.showBackupSaveOptions(tempFilePath, fileName);
        },
      });
    },

    // 显示备用保存选项
    showBackupSaveOptions(tempFilePath, fileName) {
      // 直接显示保存选项，不显示额外提示
      this.showAlternativeSaveOptions(tempFilePath, fileName);
    },

    // 显示替代保存选项
    showAlternativeSaveOptions(tempFilePath, fileName) {
      uni.showActionSheet({
        itemList: [
          "分享到微信好友",
          "分享到文件传输助手",
          "保存到小程序文件夹",
          "复制文件链接",
        ],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.shareToWeChatFriend(tempFilePath, fileName);
              break;
            case 1:
              this.shareToFileHelper(tempFilePath, fileName);
              break;
            case 2:
              this.saveToAppFolder(tempFilePath, fileName);
              break;
            case 3:
              this.copyFileLink(tempFilePath, fileName);
              break;
          }
        },
        fail: () => {
          // 用户取消，保存到默认位置
          this.saveToDefaultLocation(tempFilePath, fileName);
        },
      });
    },

    // 分享到微信好友
    shareToWeChatFriend(tempFilePath, fileName) {
      uni.shareAppMessage({
        title: `发票文件: ${fileName}`,
        path: `/pages/user/invoice_view/invoice_view?file=${encodeURIComponent(
          fileName
        )}`,
        success: () => {
          // 分享成功，静默处理
          console.log("文件分享成功");
        },
        fail: () => {
          // 分享失败，回退到默认保存
          this.saveToDefaultLocation(tempFilePath, fileName);
        },
      });
    },

    // 分享到文件传输助手
    shareToFileHelper(tempFilePath, fileName) {
      // 直接调用分享功能，不显示额外提示
      this.shareToWeChatFriend(tempFilePath, fileName);
    },

    // 保存到小程序文件夹
    saveToAppFolder(tempFilePath, fileName) {
      this.chooseAppFolderAndSave(tempFilePath, fileName);
    },

    // 复制文件链接（如果文件在服务器上）
    copyFileLink(tempFilePath, fileName) {
      const fileUrl = `${this.BASE_URL}${this.invoiceImageUrl}`;

      // 微信小程序中复制到剪贴板
      uni.setClipboardData({
        data: fileUrl,
        success: () => {
          uni.showToast({
            title: "链接已复制",
            icon: "success",
          });
        },
        fail: () => {
          // 复制失败，回退到默认保存
          this.saveToDefaultLocation(tempFilePath, fileName);
        },
      });
    },

    // 获取文件类型（用于wx.openDocument）
    getFileType(fileName) {
      const extension = (fileName.split(".").pop() || "").toLowerCase();

      const typeMap = {
        pdf: "pdf",
        ofd: "ofd",
        doc: "doc",
        docx: "docx",
        xls: "xls",
        xlsx: "xlsx",
        ppt: "ppt",
        pptx: "pptx",
      };

      return typeMap[extension] || "pdf";
    },

    // 选择小程序内文件夹并保存
    chooseAppFolderAndSave(tempFilePath, fileName) {
      // 提供小程序内文件夹选项
      uni.showActionSheet({
        itemList: [
          "保存到发票文件夹",
          "保存到文档文件夹",
          "保存到数据文件夹",
          "创建新文件夹",
        ],
        success: (res) => {
          let folderPath = wx.env.USER_DATA_PATH;
          let folderName = "";

          switch (res.tapIndex) {
            case 0:
              folderPath = `${wx.env.USER_DATA_PATH}/Invoice`;
              folderName = "发票文件夹";
              break;
            case 1:
              folderPath = `${wx.env.USER_DATA_PATH}/Documents`;
              folderName = "文档文件夹";
              break;
            case 2:
              folderPath = `${wx.env.USER_DATA_PATH}/Data`;
              folderName = "数据文件夹";
              break;
            case 3:
              this.createNewFolderAndSave(tempFilePath, fileName);
              return;
          }

          this.saveFileToChosenLocation(
            tempFilePath,
            fileName,
            folderPath,
            folderName
          );
        },
        fail: () => {
          this.saveToDefaultLocation(tempFilePath, fileName);
        },
      });
    },

    // 创建新文件夹并保存
    createNewFolderAndSave(tempFilePath, fileName) {
      uni.showModal({
        title: "创建文件夹",
        content: "请输入文件夹名称",
        editable: true,
        placeholderText: "输入文件夹名称",
        success: (res) => {
          if (res.confirm && res.content) {
            const folderName = res.content.trim();
            if (folderName) {
              const folderPath = `${wx.env.USER_DATA_PATH}/${folderName}`;
              this.saveFileToChosenLocation(
                tempFilePath,
                fileName,
                folderPath,
                folderName
              );
            } else {
              uni.showToast({
                title: "文件夹名称不能为空",
                icon: "none",
              });
            }
          } else {
            // 用户取消，使用默认位置
            this.saveToDefaultLocation(tempFilePath, fileName);
          }
        },
      });
    },

    // 保存文件到用户选择的位置
    saveFileToChosenLocation(tempFilePath, fileName, folderPath, folderName) {
      uni.showLoading({
        title: "保存中...",
      });

      const fs = uni.getFileSystemManager();

      // 先确保文件夹存在
      try {
        fs.mkdirSync(folderPath, true);
      } catch (error) {
        // 文件夹可能已存在，忽略错误
        console.log("文件夹已存在或创建失败:", error);
      }

      const finalPath = `${folderPath}/${fileName}`;

      fs.copyFile({
        srcPath: tempFilePath,
        destPath: finalPath,
        success: () => {
          uni.hideLoading();
          uni.showModal({
            title: "保存成功",
            content: `文件已保存到${folderName}\n\n文件名: ${fileName}\n\n路径: ${folderPath}`,
            showCancel: false,
            confirmText: "知道了",
          });
        },
        fail: (err) => {
          console.error("保存到选择位置失败:", err);
          uni.hideLoading();

          // 如果保存到选择位置失败，尝试默认位置
          uni.showModal({
            title: "保存失败",
            content: "保存到选择位置失败，是否保存到默认位置？",
            success: (res) => {
              if (res.confirm) {
                this.saveToDefaultLocation(tempFilePath, fileName);
              }
            },
          });
        },
      });
    },

    // 保存到默认位置
    saveToDefaultLocation(tempFilePath, fileName) {
      uni.showLoading({
        title: "保存中...",
      });

      try {
        const fs = uni.getFileSystemManager();

        // 生成唯一文件名，避免重复
        const timestamp = Date.now();
        const fileExtension = fileName.split(".").pop() || "";
        const uniqueFileName = `invoice_${timestamp}.${fileExtension}`;

        // 使用默认路径
        let savedPath;
        if (uni.env && uni.env.USER_DATA_PATH) {
          savedPath = `${uni.env.USER_DATA_PATH}/${uniqueFileName}`;
        } else {
          savedPath = `${wx.env.USER_DATA_PATH || ""}/${uniqueFileName}`;
        }

        fs.copyFile({
          srcPath: tempFilePath,
          destPath: savedPath,
          success: () => {
            uni.hideLoading();
            this.showDownloadSuccess(uniqueFileName, savedPath);
          },
          fail: (err) => {
            uni.hideLoading();
            console.error("文件保存失败:", err);

            // 保存失败，使用临时文件
            uni.showModal({
              title: "保存提示",
              content:
                "文件已下载到临时目录，请尽快查看。重启应用后文件可能会被清理。",
              showCancel: false,
              confirmText: "知道了",
            });
          },
        });
      } catch (error) {
        uni.hideLoading();
        console.error("保存文件异常:", error);
        uni.showToast({
          title: "保存失败，请重试",
          icon: "none",
        });
      }
    },

    // 显示下载成功提示
    showDownloadSuccess(fileName, savedPath) {
      const fileType = this.invoiceFormat || "PDF";

      uni.showModal({
        title: "下载成功",
        content: `${fileType}发票已保存到本地\n\n文件名: ${fileName}\n\n提示: 需要安装相应的阅读器才能打开${fileType}文件`,
        showCancel: true,
        cancelText: "知道了",
        confirmText: "查看路径",
        success: (res) => {
          if (res.confirm) {
            // 显示文件路径信息
            uni.showModal({
              title: "文件位置",
              content: `文件保存在小程序数据目录中\n\n如需查看文件，可以通过：\n1. 微信 - 我 - 设置 - 通用 - 储存空间 - 小程序\n2. 找到本小程序并管理文件`,
              showCancel: false,
              confirmText: "明白了",
            });
          }
        },
      });
    },

    // 返回
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.container {
  padding: 20upx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 30upx;
}

.title {
  font-size: 36upx;
  font-weight: 600;
  color: #333;
}

.loading {
  text-align: center;
  padding: 100upx 0;
  font-size: 28upx;
  color: #666;
}

.no-invoice {
  text-align: center;
  padding: 100upx 0;
}

.no-invoice-img {
  width: 200upx;
  height: 200upx;
  margin-bottom: 30upx;
}

.no-invoice-text {
  font-size: 28upx;
  color: #999;
}

.invoice-content {
  margin-bottom: 100upx;
}

.file-section {
  margin-bottom: 30upx;
}

.image-section {
  background-color: #fff;
  border-radius: 12upx;
  padding: 30upx;
  text-align: center;
}

.invoice-image {
  width: 100%;
  max-width: 600upx;
  max-height: 400upx;
  border-radius: 8upx;
  border: 2upx solid #e1e1e1;
}

.pdf-container,
.ofd-container {
  background-color: #fff;
  border-radius: 12upx;
  padding: 30upx;
  text-align: center;
}

.file-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20upx;
  padding-bottom: 20upx;
  border-bottom: 2upx solid #f0f0f0;
}

.file-name {
  font-size: 28upx;
  color: #333;
  font-weight: 500;
  flex: 1;
  text-align: left;
  word-break: break-all;
}

.file-format {
  font-size: 24upx;
  color: #007aff;
  background-color: #e6f3ff;
  padding: 8upx 16upx;
  border-radius: 20upx;
  margin-left: 20upx;
}

.pdf-preview,
.ofd-preview {
  padding: 60upx 20upx;
  background-color: #f8f9fa;
  border-radius: 8upx;
  border: 2upx dashed #ddd;
}

.pdf-placeholder,
.ofd-placeholder {
  display: block;
  font-size: 32upx;
  color: #666;
  margin-bottom: 20upx;
  font-weight: 500;
}

.pdf-tip,
.ofd-tip {
  display: block;
  font-size: 24upx;
  color: #999;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  gap: 20upx;
  margin-bottom: 30upx;
  padding: 0 20upx;
}

.invoice-info {
  background-color: #fff;
  border-radius: 12upx;
  padding: 30upx;
}

.info-title {
  font-size: 32upx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20upx;
  text-align: center;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20upx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  flex: 0 0 calc(100% - 10upx);

  &.full-width {
    flex: 0 0 100%;
  }
}

.info-label {
  font-size: 24upx;
  color: #666;
  margin-bottom: 8upx;
}

.info-value {
  font-size: 28upx;
  color: #333;
  word-break: break-all;
}

.back-button {
  position: fixed;
  bottom: 30upx;
  left: 20upx;
  right: 20upx;
}

.btn {
  width: 100%;
  height: 80upx;
  border-radius: 40upx;
  font-size: 32upx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &.btn-default {
    background-color: #f8f8f8;
    color: #666;
  }

  &.btn-primary {
    background-color: #007aff;
    color: #fff;
  }

  &.btn-success {
    background-color: #28a745;
    color: #fff;
  }
}

.action-buttons .btn {
  flex: 1;
}
</style>
